<template>
  <div class="home">
    <a-layout theme="light">
      <a-layout-header theme="light">Header</a-layout-header>
      <a-layout>
        <a-layout-sider>
          <a-menu
            theme="dark"
            mode="inline"
            v-model:selectedKeys="selectedKeys"
            :style="{ lineHeight: '64px' }"
            @click="Class.handleRouter($event)"
          >
            <a-menu-item :key="item.path" v-for="item in list">{{
              item.meta.title
            }}</a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout-content>
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "Home",
  setup() {
    const router = useRouter();
    const list = router.getRoutes().filter((item) => {
      return item.meta.isShow;
    });
    const data = reactive({
      selectedKeys: ["1"],
    });
    class Class {
      handleRouter(data: { key: string }) {
        router.push(data.key);
        console.log(data);
      }
    }
    return {
      ...toRefs(data),
      list,
      Class: new Class(),
    };
  },
});
</script>
<style scoped>
.ant-layout-header {
  background: #ffff;
  border-bottom: 1px solid #ccc;
}
.ant-layout-has-sider {
  height: calc(100vh - 70px);
}
</style>
